<template lang="pug">
mt-dialog(
  v-model="appmodel"
  title="查询危急值记录"
  :on-close="updateModel"
  :on-cancel="updateModel"
  hide-confirm
  size="large"
)
  .sampleAeeangement
    .sampleAeeangement__left
      SectionTitle 标本信息
      data-page(
      v-bind="pageParams"
      )
        mt-table(
        v-bind="projectTableProps"
        style="height: 350px;width: 600px;"
        )
    .sampleAeeangement__right
      .sampleAeeangement__right__top
        SectionTitle 检验结果
        mt-table(
        v-bind="tableProps"
        style="height: 150px;"
      )
      .sampleAeeangement__right__bottom
        mt-form(
        v-bind="editFormProps"
          )
  </template>

<script setup lang="ts">
import { type QueryPagination, useApi } from "@scmt/core-api";
import { useQuery } from "@scmt/common-hooks";
import {
  type FormItemProps,
  type IAction,
  type TableProps,
  type EditFormProps,
  type DataPageProps,
} from "@scmt/common-components";
import { type SpecimenQueryParams } from "@scmt/api-lis-specimen";
import { SectionTitle } from "@scmt/common-components";
import { type CriticalValueEntity } from "@scmt/api-lis-critical-value";
//添加 Props属性
const $api = useApi();
const editingObj = ref<{} | CriticalValueEntity>({});

const appmodel = defineModel({
  default: false,
});
const emit = defineEmits(["message-to-parent"]);
const queryPramas = reactive<SpecimenQueryParams>({
  states: 0,
  pageNum: 1,
  pageSize: 20,
});
const updateModel = () => {
  appmodel.value = false;
};

const { query, data, loadingMap } = useQuery({
  tableData: (q: any) => {
    const params = Object.assign({}, queryPramas, q);
    return $api.lis.specimen.query(params);
  },
  getCriticalValueBySpecimenId: (q: any) => {
    const params = Object.assign({}, queryPramas, q);
    return $api.lis.criticalValue
      .getCriticalValueBySpecimenId(params)
      .then((res) => {
        editingObj.value = $api.lis.criticalValue.$$createEntity(res.data);
        return res.datalist;
      });
  },
  listDoctorAsOptions: (val: string) =>
    $api.user.listDoctorAsOptions({ officeId: val }),

  listAsOptions: (val: string) => $api.upms.org.listAsOptions(),
  listAsBedOptions: () => $api.osm.bed.listAsOptions(),
  listOffOptions: () => {
    return $api.upms.org.listAsOptions();
  },
  listequipmentAsOptions: () => $api.lis.equipment.listAsOptions(),
});

const editFormProps = computed<EditFormProps>(() => {
  const formItems: FormItemProps[] = [
    {
      prop: "remark",
      label: "备注内容",
      required: false,
      disabled: true,
    },
    {
      prop: "reportId",
      label: "发送人员",
      required: false,
      disabled: true,
      as: "select",
      options: {
        loadMethod: () => $api.user.listDoctorAsOptions({ officeId: "" }),
      },
    },
    {
      prop: "confirmId",
      label: "确认人员",
      required: false,
      disabled: true,
      as: "select",
      options: {
        loadMethod: () => $api.user.listDoctorAsOptions({ officeId: "" }),
      },
    },
    {
      prop: "confirmTime",
      label: "确认时间",
      disabled: true,
      required: false,
    },
    {
      prop: "feedback",
      label: "反馈结果",
      disabled: true,
      required: false,
    },
  ];

  const editProps: EditFormProps = {
    items: formItems,
    model: editingObj.value,
    columns: 1,
  };
  return editProps;
});

const pageParams = computed<DataPageProps>(() => {
  const queryFields: FormItemProps[] = [
    {
      prop: "specimenNumber",
      label: "标本号",
    },
    {
      prop: "barcode",
      label: "条码号",
    },
    {
      prop: "patientName",
      label: "患者姓名",
    },
    {
      prop: "inspectionTime",
      label: "检验时间",
      as: "date",
    },
  ];

  const dataPageProps: DataPageProps = {
    loading: loadingMap.tableData,
    queryModel: queryPramas,
    queryFields,
    onQuery: () => query("tableData"),
    onAct: onPageActions,
    columns: 2,
    flex: true,
  };

  return dataPageProps;
});

const projectTableProps = computed(() => {
  const { tableData } = toRefs(data);

  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value?.items,
    pagination: tableData.value?.pagination,
    insertIndex: false,
    columns: [
      {
        prop: "specimenNumber",
        label: "标本号",
        minWidth: 180,

        tooltip: true,
      },
      {
        prop: "patientName",
        label: "患者信息",
        tooltip: true,
      },
      {
        prop: "applicationProject",
        label: "申请项目",
        tooltip: true,
      },
      {
        prop: "billingDepartment",
        label: "开单科室",
        tooltip: true,
        render: ({ row }) => {
          const patientType = data.listOffOptions ?? [];
          let resText = row.billingDepartment + "";
          if (patientType && patientType.length > 0) {
            let filter = patientType.filter(
              (item) => item.value == row.billingDepartment
            );
            if (filter && filter.length > 0) {
              resText = filter[0].label;
            }
          }
          return h("div", resText);
        },
      },
      {
        prop: "billingDoctor",
        label: "开单医生",
        tooltip: true,
        render: ({ row }) => {
          const patientType = data.listDoctorAsOptions ?? [];
          let resText = row.billingDoctor + "";
          if (patientType && patientType.length > 0) {
            let filter = patientType.filter(
              (item) => item.value == row.billingDoctor
            );
            if (filter && filter.length > 0) {
              resText = filter[0].label;
            }
          }
          return h("div", resText);
        },
      },
      {
        prop: "deviceId",
        label: "检验设备",
        tooltip: true,
        render: ({ row }) => {
          const patientType = data.listequipmentAsOptions ?? [];
          let resText = row.deviceId + "";
          if (patientType && patientType.length > 0) {
            let filter = patientType.filter(
              (item) => item.value == row.deviceId
            );
            if (filter && filter.length > 0) {
              resText = filter[0].label;
            }
          }
          return h("div", resText);
        },
      },
      {
        prop: "inspectionTime",
        label: "检验日期",
        tooltip: true,
        width: 170,
      },
    ],
    onAct: onPageActions,
    onPaginate: (pagination: QueryPagination) => query("tableData", pagination),
    highlightCurrentRow: true,
    onRowClick: (row: any) => {
      query("getCriticalValueBySpecimenId", { specimenId: row.id });
    },
  };
  return tableProps;
});

const tableProps = computed(() => {
  const { getCriticalValueBySpecimenId } = toRefs(data);

  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: getCriticalValueBySpecimenId.value?.resultList,
    columns: [
      {
        prop: "baseProjectName",
        label: "检验项目",
      },
      {
        prop: "result",
        label: "结果",
        tooltip: true,
      },
      {
        prop: "state",
        label: "状态",
        tooltip: true,
      },
      {
        prop: "unit",
        label: "单位",
        tooltip: true,
      },
      {
        prop: "reference",
        label: "参考",
        tooltip: true,
      },
    ],
    onAct: onPageActions,
    onPaginate: (pagination: QueryPagination) => query("tableData", pagination),
  };
  return tableProps;
});

const onPageActions = (action: IAction, model?: any) => {
  switch (action.event) {
    case "add":
      break;
    case "destroy":
      break;
  }
};

watch(
  appmodel,
  (visible: boolean) => {
    if (visible) {
      query("tableData");
      query("listDoctorAsOptions");
      query("listAsOptions");
      query("listAsBedOptions");
      query("listOffOptions");
      query("listequipmentAsOptions");
    }
  },

  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.sampleAeeangement {
  display: flex;
  width: 100%;
  &__left {
    flex: 4;
    margin-right: 20px;
  }
  &__right {
    flex: 5;
    height: 50%;
    margin-right: 20px;
    flex-direction: column;
    &__top {
      flex: 5;
      height: 50;
    }
    &__bottom {
      flex: 5;
      margin-top: 20px;
    }
  }
}
</style>
